<script setup lang="ts">
import { ref } from 'vue';

// 收藏数据
const favorites = ref([
  {
    id: 1,
    type: 'destination',
    title: '巴黎',
    description: '浪漫之都，艺术与美食的天堂',
    image: 'https://bpic.588ku.com/back_origin_min_pic/23/06/18/e627e607c86ff1f0a4da2e2a145245c8.jpg',
    date: '2024-05-12'
  },
  {
    id: 2,
    type: 'guide',
    title: '日本樱花季旅行攻略',
    description: '一年一度的樱花季，带你领略日本最美的春天。从东京到京都，精选赏樱胜地和拍摄技巧。',
    image: 'https://img1.qunarzz.com/travel/d6/1801/7d/999bf0321d4daab5.jpg_r_1360x1360x95_0c4124d0.jpg',
    date: '2024-05-08'
  },
  {
    id: 3,
    type: 'hotel',
    title: '巴黎丽兹酒店',
    description: '位于巴黎市中心的奢华五星级酒店，提供无与伦比的服务和设施。',
    image: 'https://ts1.tc.mm.bing.net/th/id/R-C.d14aa6ca31627a77a9539e97beaf2447?rik=aZUYZJxcko7kpg&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20170904%2fa7afdfb8c5fa44e48039a502d6d469a8.jpeg&ehk=Zmv7HtxGY4TD81Kq6zPgiknEgbIcVBUyyetcXw80psw%3d&risl=&pid=ImgRaw&r=0',
    date: '2024-05-05'
  },
  {
    id: 4,
    type: 'destination',
    title: '马尔代夫',
    description: '梦幻般的海岛天堂，水上别墅和水晶般清澈的海水',
    image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.4OJ0HafD0F_muSAVhLKvNQHaDm?rs=1&pid=ImgDetMain',
    date: '2024-04-20'
  },
  {
    id: 5,
    type: 'guide',
    title: '纽约自由行省钱攻略',
    description: '如何在纽约这座奢华都市省钱旅行，包括免费景点、交通和美食推荐。',
    image: 'https://ts1.tc.mm.bing.net/th/id/R-C.ba84497e560ee6c55fe67f13a632993f?rik=e7atBft7ykv7cQ&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn03%2f174%2fw664h310%2f20181004%2fc845-hkvrhps2955821.jpg&ehk=a%2bs8WX1P8Lbxxt4qLOzgV308rGZbanUmZAIc%2bYxrmxc%3d&risl=&pid=ImgRaw&r=0',
    date: '2024-04-15'
  }
]);

// 筛选条件
const activeFilter = ref('all');

// 筛选收藏
const filteredFavorites = () => {
  if (activeFilter.value === 'all') {
    return favorites.value;
  }
  return favorites.value.filter(item => item.type === activeFilter.value);
};

// 获取类型图标
const getTypeIcon = (type: string) => {
  switch (type) {
    case 'destination': return '🌍';
    case 'hotel': return '🏨';
    case 'guide': return '📔';
    case 'flight': return '✈️';
    default: return '❤️';
  }
};

// 获取类型标签
const getTypeLabel = (type: string) => {
  switch (type) {
    case 'destination': return '目的地';
    case 'hotel': return '酒店';
    case 'guide': return '攻略';
    case 'flight': return '航班';
    default: return type;
  }
};

// 移除收藏
const removeFavorite = (id: number) => {
  if (confirm('确定要移除这个收藏吗？')) {
    favorites.value = favorites.value.filter(item => item.id !== id);
  }
};
</script>

<template>
  <div class="user-favorites">
    <h2 class="section-title">我的收藏</h2>
    
    <div class="favorite-filters">
      <button 
        class="filter-btn" 
        :class="{ active: activeFilter === 'all' }"
        @click="activeFilter = 'all'"
      >
        全部
      </button>
      <button 
        class="filter-btn" 
        :class="{ active: activeFilter === 'destination' }"
        @click="activeFilter = 'destination'"
      >
        目的地
      </button>
      <button 
        class="filter-btn" 
        :class="{ active: activeFilter === 'hotel' }"
        @click="activeFilter = 'hotel'"
      >
        酒店
      </button>
      <button 
        class="filter-btn" 
        :class="{ active: activeFilter === 'guide' }"
        @click="activeFilter = 'guide'"
      >
        攻略
      </button>
    </div>
    
    <div class="favorites-grid">
      <div v-for="item in filteredFavorites()" :key="item.id" class="favorite-card">
        <div class="favorite-image">
          <img :src="item.image" :alt="item.title">
          <div class="favorite-type">
            <span class="type-icon">{{ getTypeIcon(item.type) }}</span>
            <span class="type-label">{{ getTypeLabel(item.type) }}</span>
          </div>
          <button class="remove-btn" @click="removeFavorite(item.id)">×</button>
        </div>
        
        <div class="favorite-content">
          <h3 class="favorite-title">{{ item.title }}</h3>
          <p class="favorite-description">{{ item.description }}</p>
          <div class="favorite-footer">
            <span class="favorite-date">收藏于 {{ item.date }}</span>
            <button class="view-btn">查看详情</button>
          </div>
        </div>
      </div>
    </div>
    
    <div v-if="filteredFavorites().length === 0" class="no-favorites">
      <p>暂无收藏内容</p>
    </div>
  </div>
</template>

<style scoped>
.user-favorites {
  color: #333;
}

.section-title {
  margin-top: 0;
  margin-bottom: 25px;
  font-size: 22px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.favorite-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 8px 15px;
  background-color: white;
  border: 1px solid #ddd;
  color: #666;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn.active {
  background-color: #0066cc;
  color: white;
  border-color: #0066cc;
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.favorite-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}

.favorite-card:hover {
  transform: translateY(-5px);
}

.favorite-image {
  height: 180px;
  position: relative;
}

.favorite-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.favorite-type {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  color: #666;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.remove-btn:hover {
  background-color: white;
  color: #f5222d;
}

.favorite-content {
  padding: 15px;
}

.favorite-title {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.favorite-description {
  color: #666;
  font-size: 14px;
  margin: 0 0 15px 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.favorite-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.favorite-date {
  font-size: 12px;
  color: #999;
}

.view-btn {
  padding: 5px 10px;
  background-color: white;
  border: 1px solid #0066cc;
  color: #0066cc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.view-btn:hover {
  background-color: #f0f8ff;
}

.no-favorites {
  padding: 30px;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 8px;
  color: #666;
}

@media (max-width: 768px) {
  .favorites-grid {
    grid-template-columns: 1fr;
  }
}
</style> 